<template>
	<view class="tabbar-box">
		<view class="tabbar-item" v-for="(item,index) in tabbarData" :key="index" @click="changeTabbar(item,index)">
			<image class="img" :src="current==index?item.selectedIconPath:item.iconPath"></image>
			<view :class="current==index?'text active-text':'text'">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/api/index.js'
	export default {
		props: ["current"],
		data() {
			return {
				tabbarData: [{
					pagePath: "pages/index/index",
					iconPath: "/static/tabbar/index.png",
					selectedIconPath: "/static/tabbar/select_index.png",
					text: "首页"
				}, {
					pagePath: "pages/market/market",
					iconPath: "/static/tabbar/market.png",
					selectedIconPath: "/static/tabbar/select_market.png",
					text: "商城"
				}, {
					pagePath: "pages/order/order",
					iconPath: "/static/tabbar/order.png",
					selectedIconPath: "/static/tabbar/select_order.png",
					text: "订单"
				}, {
					pagePath: "pages/my/my",
					iconPath: "/static/tabbar/my.png",
					selectedIconPath: "/static/tabbar/select_my.png",
					text: "我的"
				}],
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E"
			}
		},
		created() {
			this.getSetting()
		},
		methods: {
			//获取网站配置
			getSetting() {
				http.post('/api/index/getSetting').then(res => {

					if (res.theme_color) {
						document.documentElement.style.setProperty('--bg-color', res.theme_color);
					} else {
						document.documentElement.style.setProperty('--bg-color', "white");
					}

					document.documentElement.style.setProperty('--text-color', res.font_color);
				}).catch(err => {
					console.log(err);
				})
			},
			changeTabbar(item, index) {
				uni.navigateTo({
					url: "/" + item.pagePath
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.tabbar-box {
		width: 100%;
		height: 140rpx;
		position: sticky;
		left: 0;
		bottom: 0;
		display: flex;
		box-shadow: 0px -1px 10px 0px rgba(50, 50, 50, 0.42);
		background-color: var(--bg-color);

		.tabbar-item {
			width: 25%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;

			>.img {
				width: 55rpx;
				height: 55rpx;
			}

			>.text {
				font-size: 24rpx;
				color: var(--text-color);
			}

			>.active-text {
				color: var(--text-color);
			}
		}
	}
</style>